<style scoped>
.list_header {
  display: flex;
  height: 44px;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 14px;
}
.list_header > img {
  margin-left: 10px;
  margin-bottom: 2px;
  cursor: pointer;
}
.list_main {
  width: 100%;
  list-style: none;
  padding: 0 27px 12px 16px;
  max-height: calc(100% - 44px);
  overflow-y: auto;
}
.list_item {
  display: flex;
  margin-top: 6px;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.list_item:hover {
  color: #2071f5;
}
.list_item.checked {
  color: #2071f5;
}
.list_item > span {
  width: calc(100% - 32px - 24px);
  text-align: start;
}
.list_item > img {
  cursor: pointer;
}
</style>
<template >
  <div>
    <div class="list_header">
      <span> 车辆管理 </span>
      <img
        src="@/assets/images/icon_add.png"
        @click="onTypeAdd" >
      <img
        src="@/assets/images/icon_refresh.png"
        @click="updateTypeListData">
    </div>
    <a-spin :spinning="spinning">
      <ul class="list_main">
        <li
          v-for="item in typeList"
          :key="item.id"
          :class="['list_item',{'checked': checkedType.id == item.id}]"
          @click="checkType(item)">
          <span>{{ item.name }}</span>
          <img
            src="@/assets/images/icon_edit.png"
            @click="onTypeEdit(item)">
          <img
            src="@/assets/images/icon_delete.png"
            @click="deleteType(item)">
        </li>
      </ul>
    </a-spin>
  </div>

  <!-- 车辆类型列表弹框 -->
  <a-modal
    v-model:visible="modalTypeVisible"
    :title="modalTypeName"
    @ok="handleTypeOK">
    <a-form>
      <a-form-item
        label="车辆类型名称:"
        v-bind="validateInfos.name">
        <a-input v-model:value="theType.name" />
      </a-form-item>
    </a-form>
  </a-modal>
  <deleteConfirm
    v-model:visible="tipVisible"
    @onOk="deleteRowAfterConfirm" />
</template>

<script setup>
import {
  EditFilled,
  DeleteTwoTone,
  EditTwoTone,
  CarTwoTone,
  UploadOutlined,
  PlusCircleTwoTone
} from '@ant-design/icons-vue'
import { ref, reactive, defineExpose, watch, defineEmits } from 'vue'
import { message, Form } from 'ant-design-vue'
import { getVehicleTypeByAll, delVehicleTypeByID, addVehicleType, editVehicleType } from '@/api/vehicletype/handleData'

const { useForm } = Form
const checkedType = reactive({ id: undefined, name: undefined })
const onTypeAdd = () => {
  // 窗口显示
  modalTypeVisible.value = true
  // 标题更改
  modalTypeName.value = '添加车辆类型'
  // 内容重置
  theType.name = ''
  theType.id = null
  resetFields()
}
const tipVisible = ref(false)
const spinning = ref(false)
const onTypeEdit = (_item) => {
  // console.info('--> Edit：', _item)
  theType.name = _item.name
  theType.id = _item.id
  modalTypeVisible.value = true
  modalTypeName.value = '编辑车辆类型'
}
const onTypeDelete = (_item) => {
  const delID = _item.id
  delVehicleTypeByID(delID)
    .then((response) => {
      message.success(response.resMsg)
      updateTypeListData()
    })
}
/** 车组列表数据获取 */
const typeList = ref([])
// 车辆类型列表 map ， id : name
const updateTypeListData = () => {
  spinning.value = true
  getVehicleTypeByAll()
    .then((response) => {
      spinning.value = false
      typeList.value = response.data || []
      if (typeList.value.length > 0) {
        let checked = typeList.value.filter((item) => item.id === checkedType.id)
        if (checked.length === 0) {
          checkedType.id = typeList.value[0].id
          checkedType.name = typeList.value[0].name
        }
      }
    })
    .catch(() => {
      spinning.value = false
    })
}
updateTypeListData()
/**
 * 车辆列表确认交互
 */
const handleTypeOK = () => {
  validate()
    .then(() => {
      submitTypeForm()
    })
    .catch(() => {
      message.warning('请检查表单')
    })
}

const submitTypeForm = () => {
  const listName = theType.name
  const vehicletype = {
    id: theType.id, // 如果在添加状态，id 应该是 不影响
    name: listName,
    remark: 'add on browser'
  }
  if (modalTypeName.value === '编辑车辆类型') {
    editVehicleType(vehicletype).then((res) => {
      message.success(res.resMsg)
      updateTypeListData()
      // 弹框隐藏
      modalTypeVisible.value = false
    })
  } else {
    addVehicleType(vehicletype).then((res) => {
      message.success(res.resMsg)
      updateTypeListData()
      // 弹框隐藏
      modalTypeVisible.value = false
    })
  }
}
/**
 * 选中车辆类型
 * @param {Object} type 车辆类型信息
*/
const checkType = (type) => {
  checkedType.id = type.id
  checkedType.name = type.name
}
let deletingItem
const deleteRowAfterConfirm = () => {
  tipVisible.value = false
  if (deletingItem) onTypeDelete(deletingItem)
}
const deleteType = (item) => {
  deletingItem = item
  tipVisible.value = true
}
/**
 * 添加车辆类型控制
 */
const modalTypeVisible = ref(false)
const modalTypeName = ref('新增车辆类型')
/** 车辆类型表单 */
const theType = reactive({
  name: '',
  id: null
})

/** 车辆类型规则 */
const rulesRef = reactive({
  name: [
    {
      required: true,
      message: '请填写内容'
    }
  ]
})
const { resetFields, validate, validateInfos } = useForm(theType, rulesRef)
let emit = defineEmits(['nodeChange'])
watch(checkedType, (v) => {
  emit('nodeChange', v)
}, { immediate: true, deep: true })

/** -----------------对外接口-----------------  */

/** 获取车辆列表数据 */
const getCarType = () => typeList.value
/** 更新车辆列表  */
const updateCatType = () => {
  updateTypeListData()
}

/** 抛出外部可调用的方法 */
defineExpose({
  getCarType,
  updateCatType
})

</script>
